<template>
	<div class="card table-search" v-if="columns.length">
		<el-form ref="formRef" :model="formData">
			<Grid
				ref="gridRef"
				:collapsed="collapsed && !hasHideColumns"
				:gap="[20, 0]"
				:cols="searchCol"
			>
				<GridItem
					v-for="(item, index) in normalColumns"
					:key="item.prop"
					v-bind="getResponsive(item)"
					:index="index"
				>
					<el-form-item :label="`${item.label} :`">
						<SearchFormItem
							:column="item"
							:searchParam="formData"
						/>
					</el-form-item>
				</GridItem>
				<GridItem suffix>
					<div class="operation">
						<el-button-group v-if="hasHideColumns">
							<el-button
								type="primary"
								:icon="Search"
								@click="$emit('search', formData)"
								>搜索</el-button
							>
							<el-button
								type="primary"
								class="mr-8"
								:icon="collapsed ? ArrowDown : ArrowUp"
								@click="collapsed = !collapsed"
							/>
						</el-button-group>
						<el-button
							v-else
							type="primary"
							:icon="Search"
							@click="$emit('search', formData)"
							>搜索</el-button
						>
						<el-button :icon="Delete" @click="handleReset"
							>重置</el-button
						>
						<el-button
							v-if="showCollapse"
							type="primary"
							link
							class="search-isOpen"
							@click="collapsed = !collapsed"
						>
							{{ collapsed ? "展开" : "合并" }}
							<el-icon class="el-icon--right">
								<component
									:is="collapsed ? ArrowDown : ArrowUp"
								></component>
							</el-icon>
						</el-button>
					</div>
				</GridItem>
			</Grid>
			<template v-if="hasHideColumns">
				<div v-show="!collapsed">
					<Grid :gap="[20, 0]" :cols="searchCol">
						<GridItem
							v-for="(item, index) in hideColumns"
							:key="item.prop"
							v-bind="getResponsive(item)"
							:index="index"
						>
							<el-form-item :label="`${item.label} :`">
								<SearchFormItem
									:column="item"
									:searchParam="formData"
								/>
							</el-form-item>
						</GridItem>
					</Grid>
				</div>
			</template>
		</el-form>
	</div>
</template>

<script>
import { computed, ref, watch } from "vue";
import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import SearchFormItem from "@/components/SearchFormItem/index.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";

export default {
	components: {
		SearchFormItem,
		Grid,
		GridItem,
	},
	props: {
		searchCol: {
			type: [Number, Object],
			default: () => ({ xs: 2, sm: 3, md: 3, lg: 4, xl: 6 }),
		},
		columns: {
			type: Array,
			default: () => [],
		},
		defaultParam: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: ["search", "reset"],
	setup(props, { emit }) {
		const columnsValue = props.columns.reduce((obj, item) => {
			obj[item.prop] = item.value;
			return obj;
		}, {});
		const defaultParam = ref({ ...columnsValue, ...props.defaultParam });
		const formData = ref({ ...defaultParam.value });
		// 合并默认参数
		watch(
			() => props.defaultParam,
			(val) => {
				Object.assign(formData.value, val);
			}
		);

		const handleReset = () => {
			const columnsValue = props.columns.reduce((obj, item) => {
				obj[item.prop] = item.value;
				return obj;
			}, {});
			formData.value = { ...columnsValue, ...props.defaultParam };
			emit("reset");
		};

		// 获取响应式设置
		const getResponsive = (item) => {
			return {
				span: item?.span,
				offset: item?.offset ?? 0,
				xs: item?.xs,
				sm: item?.sm,
				md: item?.md,
				lg: item?.lg,
				xl: item?.xl,
			};
		};

		// 是否默认折叠搜索项
		const collapsed = ref(true);

		// 获取响应式断点
		const gridRef = ref();
		const breakPoint = computed(() => gridRef.value?.breakPoint);

		const normalColumns = computed(() =>
			props.columns.filter((item) => !item.hide)
		);
		const hideColumns = computed(() =>
			props.columns.filter((item) => item.hide)
		);

		const hasHideColumns = computed(() => hideColumns.value.length > 0);

		// 判断是否显示 展开/合并 按钮
		const showCollapse = computed(() => {
			if (hasHideColumns.value) return false;
			let show = false;
			normalColumns.value.reduce((prev, current) => {
				prev +=
					(current[breakPoint.value]?.span ?? current?.span ?? 1) +
					(current[breakPoint.value]?.offset ?? current?.offset ?? 0);
				if (typeof props.searchCol !== "number") {
					if (prev >= props.searchCol[breakPoint.value]) show = true;
				} else {
					if (prev > props.searchCol) show = true;
				}
				return prev;
			}, 0);
			return show;
		});

		return {
			normalColumns,
			formData,
			getResponsive,
			collapsed,
			gridRef,
			breakPoint,
			hideColumns,
			hasHideColumns,
			showCollapse,
			handleReset,
			Delete,
			Search,
			ArrowDown,
			ArrowUp,
		};
	},
};
</script>

<style lang="scss" scoped>
.table-search {
	background-color: #fff;
	padding: 18px 18px 0;
	margin-bottom: 10px;
	.el-form {
		.el-form-item__content > * {
			width: 100%;
		}

		// 去除时间选择器上下 padding
		.el-range-editor.el-input__wrapper {
			padding: 0 10px;
		}
	}
	.operation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 18px;
	}
	.mr-8 {
		margin-right: 8px;
	}
}
</style>
